<template>
  <div class="search-container">
    <a-input-search class="search" placeholder="输入内容以搜索" search-button @search="search"/>
  </div>
  <a-button style="margin-left: 20px" status="danger" @click="deleteBatchAnswerResult">删除</a-button>
  <a-table
      style="padding: 20px"
      row-key="id"
      :data="data"
      :row-selection="rowSelection"
      v-model:selectedKeys="selectedKeys"
      :pagination="false"
      :page-position="'bottom'"
      :stripe="true"
  >
    <template #columns>
      <a-table-column title="题库名称" data-index="questionBankName" align="center"></a-table-column>
      <a-table-column title="分数" data-index="score" align="center"></a-table-column>
      <a-table-column title="作答人" align="center">
        <template #cell="{record}">
          <a-typography-text>{{ userInfoCache[record.userId] || '加载中...' }}</a-typography-text>
        </template>
      </a-table-column>
      <a-table-column title="创建时间" data-index="createTime" align="center"></a-table-column>
      <a-table-column title="更新时间" data-index="updateTime" align="center"></a-table-column>
      <a-table-column title="操作" align="center">
        <template #cell="{record}">
          <a-button style="margin-right: 5px" size="mini" status="danger" @click="deleteAnswerResult(record.id)">删除
          </a-button>
        </template>
      </a-table-column>

    </template>
  </a-table>
  <div style="display: flex; justify-content: center; margin-top: 10px; margin-bottom: 10px;">
    <a-pagination
        :total="pageInfo.total"
        :current="pageInfo.current"
        :page-size="pageInfo.pageSize"
        show-jumper
        show-page-size
        @change="listAnswerResult"
        @page-size-change="changePageSize"
    />
  </div>
  <a-modal
      v-model:visible="confirmVisible"
      @ok="doDeleteAnswerResult"
      :closable="false"
  >
    <div style="text-align: center">
      确认删除？
    </div>
  </a-modal>
</template>

<script setup>
// 列名
import {onMounted, reactive, ref} from "vue";
import {deleteAnswerResultUsingPost, listAnswerResultVOByPageUsingPost} from "@/api/AnswerResultRequest";
import {getUserVOByIdUsingGet} from "@/api/UserRequest";

// 题库列表
const data = ref([]);
// 选择的题库数据
const selectedKeys = ref([]);

// 搜索框输入的内容
const inputContent = ref("")
// 选项框配置信息
const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
});
// 分页配置信息
const pageInfo = ref({
  pageSize: 5,
  current: 1,
  total: 50
});

// 当前要删除的作答记录ID
let delAnswerID = ref(0);
// 提示框是否展示
let confirmVisible = ref(false);

// 缓存用户信息
const userInfoCache = ref({});

// 获取题库信息
onMounted(async () => {
  await listAnswerResult(1);
})

// 获取题库信息的具体方法
async function listAnswerResult(current) {
  const result = await listAnswerResultVOByPageUsingPost({
    current: current,
    pageSize: pageInfo.value.pageSize,
    searchText: inputContent.value
  });
  pageInfo.value.current = current;
  pageInfo.value.total = result.data.data.total;
  data.value = result.data.data.records;

  // 预加载用户信息
  const userIds = [...new Set(data.value.map(item => item.userId))];
  const userPromises = userIds.map(async userId => {
    if (!userInfoCache.value[userId]) {
      try {
        const userResult = await getUserVOByIdUsingGet(userId);
        if (userResult.data.code === 0) {
          userInfoCache.value[userId] = userResult.data.data.userName;
        }
      } catch (error) {
        console.error('获取用户信息失败:', error);
        userInfoCache.value[userId] = '未知用户';
      }
    }
  });
  await Promise.all(userPromises);
}

async function changePageSize(pageSize) {
  pageInfo.value.pageSize = pageSize;
  await listAnswerResult(pageInfo.value.current);
}

function search( content ) {
  inputContent.value = content;
  listAnswerResult(1);
}

function deleteBatchAnswerResult() {
  confirmVisible.value = true;
}

function deleteAnswerResult(id) {
  delAnswerID.value = id;
  confirmVisible.value = true;
}

// 进行删除操作
async function doDeleteAnswerResult() {
  if (delAnswerID.value !== 0) {
    await deleteAnswerResultUsingPost({
      id: delAnswerID.value
    });
    delAnswerID.value = 0;
  } else if (selectedKeys.value.length > 0) {
    await deleteAnswerResultUsingPost({
      ids: selectedKeys.value
    });
    selectedKeys.value = [];
  }
  await listAnswerResult(pageInfo.value.current);
}
</script>

<style scoped>
/* 搜索框样式 */
.search {
  width: 360px;
}

/* 搜索框容器样式 */
.search-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
</style>